<template>
  <el-dialog
    append-to-body
    :title="title"
    :visible.sync="dialogVisible"
    width="380px"
    @close="close"
  >
    <template slot="title">
      <el-button icon="el-icon-printer" type="primary" @click="handlePrint">
        打印
      </el-button>
    </template>
    <div style="max-height: 600px; overflow-x: hidden; overflow-y: scroll">
      <div
        v-for="(item, index) in bloods"
        :id="`printDiv${index}`"
        :key="index"
        style="page-break-after: always"
      >
        <div class="printArea">
          <div class="t d-flex">
            <div class="t-l text-align-center">
              <div class="t-l-1 d-flex flex-column">
                <vue-barcode
                  :display-value="false"
                  :height="height"
                  :margin="1"
                  :value="substr(item.id_out, 0, 14)"
                  :width="1.2"
                >
                  原始血袋号
                </vue-barcode>
                <div>
                  <span class="font12">
                    {{ substr(item.id_out, 0, 5) }}
                  </span>
                  <span class="font12">
                    {{ substr(item.id_out, 5, 2) }}
                  </span>
                  <b class="font12">
                    {{ substr(item.id_out, 7, 7) }}
                  </b>
                  <span
                    class="font12 text-align-center"
                    style="
                      display: inline-block;
                      padding: 2px 3px;
                      margin-right: 1px;
                      border: 1px solid #999;
                    "
                  >
                    {{ substr(item.id_out, 14, 1) }}
                  </span>
                  <span
                    class="font12 text-align-center"
                    style="
                      display: inline-block;
                      padding: 2px 3px;
                      margin-right: 1px;
                      border: 1px solid #999;
                    "
                  >
                    {{ substr(item.id_out, 15, 1) }}
                  </span>
                  <span
                    class="font12 text-align-center"
                    style="
                      display: inline-block;
                      padding: 2px 3px;
                      border: 1px solid #999;
                    "
                  >
                    {{ substr(item.id_out, 16, 1) }}
                  </span>
                </div>
                <b class="font12">{{ bloodPrint.hospital.name }}</b>
                <b class="font12">{{ bloodPrint.hospital.nameShort }}</b>
                <span class="font12">{{ bloodPrint.hospital.descri }}</span>
              </div>
              <div class="t-l-2 d-flex flex-column" style="margin-top: 4px">
                <vue-barcode
                  :display-value="false"
                  :height="height"
                  :margin="1"
                  :value="item.id"
                  :width="1.5"
                >
                  血袋号
                </vue-barcode>
                <b class="font20">{{ item.id }}</b>
                <span v-if="item.pid" class="font12">
                  制备前血袋号：{{ item.pid }}
                </span>
              </div>
              <div class="t-l-3 d-flex flex-column">
                <vue-barcode
                  :display-value="false"
                  :height="height"
                  :margin="1"
                  :value="
                    (blood && item.product_code) ||
                    bloodPrint.aboRhd.product_code
                  "
                  :width="1.1"
                >
                  血液成分码
                </vue-barcode>
                <span class="text-align-left">
                  {{
                    (blood && item.product_code) ||
                    bloodPrint.aboRhd.product_code
                  }}
                </span>
                <b class="font15 mb4 mt4">
                  {{ (item.product && item.product.name) || '' }}
                </b>
                <span class="font15">
                  血量：{{ (+item.capacity).toFixed(1) }}U
                </span>
              </div>
            </div>
            <div class="t-r">
              <div
                class="t-r-1 d-flex flex-column align-items-center text-align-center"
              >
                <b class="font64" :class="item.rhd === '阴性' ? 'stroke' : ''">
                  {{ item.abo }}
                </b>
                <b
                  class="pd4 mb4"
                  :class="item.rhd === '阴性' ? 'bg-black color-white' : ''"
                  style="
                    display: inline-block;
                    -webkit-print-color-adjust: exact;
                  "
                >
                  RH(D){{ item.rhd }}
                </b>
                <vue-barcode
                  :display-value="false"
                  :height="height"
                  :margin="1"
                  :value="(blood && item.abo_code) || bloodPrint.aboRhd.code"
                  :width="2"
                >
                  血型RHD码
                </vue-barcode>
                <span>
                  {{ (blood && item.abo_code) || bloodPrint.aboRhd.code }}
                </span>
              </div>
              <div class="h8"></div>
              <div class="t-r-2 d-flex flex-column">
                <span class="font12">
                  采血时间:
                  <b>
                    {{
                      (item.collect_time && item.collect_time.substr(0, 16)) ||
                      ''
                    }}
                  </b>
                </span>
                <div class="h8"></div>
                <span class="font12">
                  制备时间:
                  <b v-if="item.preFrom">
                    {{
                      (item.preFrom &&
                        item.preFrom.created_at &&
                        item.preFrom.created_at.substr(0, 16)) ||
                      ''
                    }}
                  </b>
                  <b v-if="item.subFrom">
                    {{
                      (item.subFrom &&
                        item.subFrom.created_at &&
                        item.subFrom.created_at.substr(0, 16)) ||
                      ''
                    }}
                  </b>
                </span>
                <div class="h8"></div>
                <span class="font12">
                  失效时间:
                  <b>
                    {{
                      (item.invalid_time && item.invalid_time.substr(0, 16)) ||
                      ''
                    }}
                  </b>
                </span>
                <div class="h8"></div>
                <vue-barcode
                  :display-value="false"
                  :height="height"
                  :margin="1"
                  :value="getInvalidCode()"
                  :width="1.2"
                >
                  失效时间码
                </vue-barcode>
                <div class="h8"></div>
                <span class="font12">
                  储存：{{
                    (item.product && item.product.temperature_self) || ''
                  }}
                </span>
              </div>
            </div>
          </div>
          <div class="h9"></div>
          <div class="b d-flex align-items-center">
            <div
              v-for="cindex in 2"
              :key="cindex"
              class="b-c text-align-center"
            >
              <span class="mr4">{{ item.donor_id }}</span>
              <span>{{ getBloodUser(blood) }}</span>
              <vue-barcode
                :display-value="false"
                :height="height"
                :margin="1"
                :value="item.tube_number"
                :width="1.2"
              >
                {{ item.tube_number }}
              </vue-barcode>
              <b :class="getClass(blood)">
                {{ item.tube_number }} {{ item.abo }} {{ item.rhd }}
              </b>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  import VueBarcode from 'vue-barcode'
  import { doPrint } from '@/api/blood'
  export default {
    components: {
      VueBarcode,
    },
    data() {
      return {
        dialogVisible: false,
        title: '打印',
        blood: {},
        barcodeValue: '00000210012349',
        height: 32,
        bloodPrint: {
          hospital: {
            name: '中国人民解放军总医院',
            nameShort: '第一医学中心',
            code: '00000210012349',
            descri: '卫血站字[2012]第1号',
          },
          id: '02116274',
          capacity: 2,
          product: {
            name: '辐照去白RH(D)阴性机采血小板',
            code: 'B0011V00',
          },
          aboRhd: {
            abo: 'AB',
            rhd: '阴性',
            code: '8400',
          },
          time: {
            collect: '2021-08-02 13:30',
            pre: '2021-08-02 13:30',
            invalid: '2021-08-02 13:30',
            invalid_code: '0272051451',
          },
        },
        bloods: [],
        print: {
          id: 'printArea', // 必要，打元素的id
          popTitle: '打印', // 打印配置页上方标题
          extraHead: '', //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
          preview: '', // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
          previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
          previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
          zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
          previewBeforeOpenCallback() {}, //预览窗口打开之前的callback（开启预览模式调用）
          previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
          beforeOpenCallback() {}, // 开启打印前的回调事件
          openCallback: () => {
            this.doPrint()
          }, // 调用打印之后的回调事件
          closeCallback() {}, //关闭打印的回调事件（无法确定点击的是确认还是取消）
          url: '',
          standard: '',
          extraCss: '',
        },
      }
    },
    methods: {
      handlePrint() {
        var newWin = window.open('') // 新打开一个空窗口
        for (var i = 0; i < this.bloods.length; i++) {
          var imageToPrint = document.getElementById('printDiv' + i) // 获取需要打印的内容
          newWin.document.write(imageToPrint.outerHTML) // 将需要打印的内容添加进新的窗口
        }
        const styleSheet = `<style>html{line-height: 1.15;-webkit-text-size-adjust: 100%;font-family: "PingFang SC", Arial, "Microsoft YaHei", sans-serif}body{margin:0}.d-flex{display:flex;}.text-align-center{text-align:center;}.align-items-center{align-items:center;}.flex-column{flex-direction:column;}.t-l,.t-r,.b-c{width:151px;}.font12{font-size:12px;}.font15{font-size:15px;}.h8{height:8px;}.h12{height:12px;}.printArea {width: 302px;color: #111;}.pd4{padding:4px;}.mb4{margin-bottom:4px;}.font64{font-size:64px;}.bg-black{background:#000;}.color-white{color:#fff;}.stroke{margin-bottom:-4px;color:transparent;-webkit-text-stroke:4px #000;text-stroke:4px #000;}.font10{font-size: 20px;transform: scale(0.5);transform-origin: 0 0;}</style>`
        newWin.document.head.innerHTML = styleSheet // 给打印的内容加上样式
        newWin.document.close() // 在IE浏览器中使用必须添加这一句
        newWin.focus() // 在IE浏览器中使用必须添加这一句
        setTimeout(function () {
          newWin.print() // 打印
          newWin.close() // 关闭窗口
        }, 100)
      },
      getInvalidCode(blood) {
        if (blood) {
          if (blood.invalid_time_code) {
            return blood.invalid_time_code
          }
          if (blood.invalid_time) {
            return blood.invalid_time.substr(0, 10).replace('-', '')
          }
        }
        return ''
      },
      getClass(blood) {
        if (blood && blood.abo === 'AB') {
          return 'font17'
        }
        return 'font18'
      },
      async doPrint() {
        const { msg } = await doPrint(this.blood.id)
        this.$emit('getAll')
        this.$baseMessage(msg, 'success', 'vab-hey-message-success')
      },
      getBloodUser(blood) {
        if (blood.blood_user) {
          return blood.blood_user
        }
        if (blood.id_out) {
          return blood.id_out.replace('=', '').substr(5, 8)
        }
        return ''
      },
      substr(str, start, length) {
        if (str && str.length > 0) {
          return str.substr(start, length)
        }
        return ''
      },
      show(bloods) {
        this.bloods = bloods
        this.dialogVisible = true
      },
      close() {
        this.bloods = []
        this.$emit('getAll')
      },
    },
  }
</script>

<style lang="scss" scoped>
  .printArea {
    width: 302px;
    padding: 16px 0;
    color: #111;
    border-bottom: 1px dashed #999;
  }
  .t-l {
    width: 151px;
  }
  .t-r {
    width: 151px;
  }
  .b-c {
    width: 151px;
  }
  .font {
    &10 {
      font-size: 20px;
      transform: scale(0.5); /* 然后缩小至80% */
      transform-origin: 0 0; /* 可能需要指定缩放原点以确保准确缩放 */
    }
    &12 {
      font-size: 12px;
    }
    &14 {
      font-size: 14px;
    }
    &16 {
      font-size: 16px;
    }
    &18 {
      font-size: 18px;
    }
    &20 {
      font-size: 20px;
    }
    &22 {
      font-size: 22px;
    }
    &24 {
      font-size: 24px;
    }
    &36 {
      font-size: 36px;
    }
    &40 {
      font-size: 40px;
    }
  }
  .mr {
    &4 {
      margin-right: 4px;
    }
    &6 {
      margin-right: 6px;
    }
    &8 {
      margin-right: 8px;
    }
    &10 {
      margin-right: 10px;
    }
    &12 {
      margin-right: 12px;
    }
  }
</style>
